<template>
  <div class="container-wrap">
    <div class="content">
      <img class="img" src="../../../assets/img/tobeConstructed.png" alt="" />
      <div class="tips">该功能还在努力修建中，请稍后访问…</div>
    </div>
    <!-- <div class="content-common">
           
            <el-form :label-position="'right'" :inline="true" :model="query">
				<el-form-item label="测站">
				    <el-input v-model="query.stnm" placeholder="测站名称"></el-input>
				</el-form-item>
				
				
				<el-form-item label="">
				   <el-button type="primary" icon="search" @click="page.currentPage=1;getData()">查询</el-button>
				 
				  
				</el-form-item>
				<el-form-item label="">
				  
				   <el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button>
				  
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary" icon="download" @click="download">下载模板</el-button>
				</el-form-item>
				<el-form-item label="">
				   <el-upload
				   :headers="headers"
				   :show-file-list="false"
				    :on-success="successup"
				    :action="daoruUrl"
				    
				   
				     :limit="1"
				     >
				     <el-button type="primary">批量导入</el-button>
				    
				   </el-upload>
				</el-form-item>
                
            </el-form>
            <el-table
                :data="tableData"
                border
               
                class="table-common"
              
                header-cell-class-name="table-header"
               
            >
                <el-table-column align="center" prop="stnm" label="测站名称"></el-table-column>
                <el-table-column align="center" prop="province" label="省份"></el-table-column>
               
				<el-table-column align="center" prop="county" label="县(区)"></el-table-column>
				<el-table-column align="center" prop="township" label="乡镇"></el-table-column>
				<el-table-column align="center" prop="village" label="村"></el-table-column>
				<el-table-column align="center" prop="avgTemp" label="年平均温度(℃)"></el-table-column>
				<el-table-column align="center" prop="maxTemp" label="年最高温度(℃)"></el-table-column>
				
				<el-table-column align="center" prop="minTemp" label="年最低温度(℃)"></el-table-column>
				<el-table-column align="center" prop="accumulateTemp" label="≥10℃积温"></el-table-column>
				<el-table-column align="center" prop="frostlessPeriod" label="无霜期(d)"></el-table-column>
				<el-table-column align="center" prop="yearDrp" label="年均降雨量(mm)"></el-table-column>
				<el-table-column align="center" prop="yearEt" label="年蒸发量(mm)"></el-table-column>
				<el-table-column align="center" prop="avgAltitude" label="平均海拔(m)"></el-table-column>
				<el-table-column align="center" prop="maxAltitude" label="最高海拔(m)"></el-table-column>
				<el-table-column align="center" prop="minAltitude" label="最低海拔(m)"></el-table-column>
				<el-table-column align="center" prop="basinArea" label="流域面积(k㎡)"></el-table-column>
				<el-table-column align="center" prop="basinLength" label="流域长度(km)"></el-table-column>
				<el-table-column align="center" prop="gullyDensity" label="沟壑密度(km/k㎡)"></el-table-column>
				<el-table-column align="center" prop="shapeFactor" label="流域形状系数"></el-table-column>
				<el-table-column align="center" prop="roadVerticalRate" label="主沟道纵比降(%)"></el-table-column>
				<el-table-column align="center" prop="slope" label="坡度(°)"></el-table-column>
				<el-table-column align="center" prop="flatSlope" label="平坡(<3)"></el-table-column>
				<el-table-column align="center" prop="gentleSlope" label="缓坡(3~5)"></el-table-column>
				<el-table-column align="center" prop="middlingSlope" label="中等坡(5~8)"></el-table-column>
				<el-table-column align="center" prop="slopingSlope" label="斜坡(8~15)"></el-table-column>
				
				<el-table-column align="center" prop="remark" label="备注"></el-table-column>
				
				
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger"   @click="handleDelete(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
			
			
			<el-row type="flex"  justify="end">
			  <el-pagination
			    background
				v-model:currentPage="page.currentPage"
				@current-change="getData"
			    layout="prev,total, pager, next"
			    :total="page.totalSize">
			  </el-pagination>
			</el-row>
        </div> -->

    <!-- 编辑弹出框 -->
    <el-dialog :title="logTitle" v-model="editVisible" width="98%">
      <table style="width: 100%" border="0px solid #ebeef5" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td>地理位置</td>
            <td><el-input v-model="form.province" placeholder=""></el-input></td>
            <td>省</td>
            <td><el-input v-model="form.county" placeholder=""></el-input></td>
            <td>县(县、区)</td>
            <td><el-input v-model="form.township" placeholder=""></el-input></td>
            <td>乡</td>
            <td><el-input v-model="form.village" placeholder=""></el-input></td>
            <td>村</td>
          </tr>
          <tr>
            <td style="width: 126px">地理坐标：东经</td>
            <td colspan="4"><el-input v-model="form.longitude" placeholder=""></el-input></td>
            <td>北纬</td>
            <td colspan="5"><el-input v-model="form.latitude" placeholder=""></el-input></td>
          </tr>
          <tr>
            <td style="font-weight: bold" colspan="9">(1)自然情况</td>
          </tr>

          <tr>
            <td style="font-weight: bold" rowspan="2">气候特征</td>
            <td>年平均温度(℃)</td>
            <td>年最高温度(℃)</td>
            <td>年最低温度(℃)</td>
            <td>≥10℃积温</td>

            <td>无霜期(d)</td>
            <td>年均降雨量(mm)</td>
            <td>年蒸发量(mm)</td>
            <td></td>
          </tr>
          <tr>
            <td>
              <el-input v-model="form.avgTemp" placeholder=""></el-input>
            </td>
            <td><el-input v-model="form.maxTemp" placeholder=""></el-input></td>
            <td><el-input v-model="form.minTemp" placeholder=""></el-input></td>
            <td><el-input v-model="form.accumulateTemp" placeholder=""></el-input></td>
            <td><el-input v-model="form.frostlessPeriod" placeholder=""></el-input></td>
            <td><el-input v-model="form.yearDrp" placeholder=""></el-input></td>
            <td><el-input v-model="form.yearEt" placeholder=""></el-input></td>
            <td></td>
          </tr>

          <tr>
            <td style="font-weight: bold" rowspan="2">流域特征</td>
            <td>平均海拔(m)</td>
            <td>最高海拔(m)</td>
            <td>最低海拔(m)</td>
            <td>流域面积(k㎡)</td>

            <td>流域长度(km)</td>
            <td>沟壑密度(km/k㎡)</td>
            <td>流域形状系数</td>
            <td>主沟道纵比降(%)</td>
          </tr>
          <tr>
            <td>
              <el-input v-model="form.avgAltitude" placeholder=""></el-input>
            </td>
            <td><el-input v-model="form.maxAltitude" placeholder=""></el-input></td>
            <td><el-input v-model="form.minAltitude" placeholder=""></el-input></td>
            <td><el-input v-model="form.basinArea" placeholder=""></el-input></td>
            <td><el-input v-model="form.basinLength" placeholder=""></el-input></td>
            <td><el-input v-model="form.gullyDensity" placeholder=""></el-input></td>
            <td><el-input v-model="form.shapeFactor" placeholder=""></el-input></td>
            <td><el-input v-model="form.roadVerticalRate" placeholder=""></el-input></td>
          </tr>

          <tr>
            <td style="font-weight: bold" rowspan="3">坡度分级</td>
            <td>坡名</td>
            <td>平坡</td>
            <td>缓坡</td>
            <td>中等坡</td>

            <td>斜坡</td>
            <td>斗坡</td>
            <td>急坡</td>
            <td>急抖破</td>
          </tr>
          <tr>
            <td>坡度(°)</td>
            <td>(小于3)</td>
            <td>3~5</td>
            <td>5~8</td>
            <td>5~15</td>
            <td>15~25</td>
            <td>25~35</td>
            <td>大于35</td>
          </tr>
          <tr>
            <td>
              <el-input v-model="form.slope" placeholder=""></el-input>
            </td>
            <td><el-input v-model="form.flatSlope" placeholder=""></el-input></td>
            <td><el-input v-model="form.gentleSlope" placeholder=""></el-input></td>
            <td><el-input v-model="form.middlingSlope" placeholder=""></el-input></td>
            <td><el-input v-model="form.slopingSlope" placeholder=""></el-input></td>
            <td><el-input v-model="form.abruptSlope" placeholder=""></el-input></td>
            <td><el-input v-model="form.steepSlope" placeholder=""></el-input></td>
            <td><el-input v-model="form.sharpSteepSlope" placeholder=""></el-input></td>
          </tr>

          <tr>
            <td style="font-weight: bold" rowspan="2">土壤与土壤侵蚀情况</td>
            <td colspan="4">主要土壤类型</td>
            <td>平均土层厚度(cm)</td>
            <td>流域平均输沙模数(t/k㎡.a)</td>
            <td>土壤侵蚀模数(t/k㎡.a)</td>

            <td>流域综合治理度(%)</td>
          </tr>
          <tr>
            <td>
              <el-input v-model="form.mainSoilType" placeholder=""></el-input>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><el-input v-model="form.soilDepth" placeholder=""></el-input></td>
            <td><el-input v-model="form.transportSandMods" placeholder=""></el-input></td>
            <td><el-input v-model="form.soilErosionMods" placeholder=""></el-input></td>
            <td><el-input v-model="form.basinControlDegree" placeholder=""></el-input></td>
          </tr>

          <tr>
            <td style="font-weight: bold" colspan="9">(2)土地利用结构(h㎡)</td>
          </tr>

          <tr>
            <td></td>
            <td>耕地</td>
            <td>园地</td>
            <td>林地</td>
            <td>牧草地</td>

            <td>其他农用地</td>
            <td>荒地</td>
            <td>其他</td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td>
              <el-input v-model="form.farmland" placeholder=""></el-input>
            </td>

            <td><el-input v-model="form.gardenPlot" placeholder=""></el-input></td>
            <td><el-input v-model="form.woodland" placeholder=""></el-input></td>
            <td><el-input v-model="form.pastureland" placeholder=""></el-input></td>
            <td><el-input v-model="form.otherFarmland" placeholder=""></el-input></td>

            <td><el-input v-model="form.wasteland" placeholder=""></el-input></td>
            <td><el-input v-model="form.otherLand" placeholder=""></el-input></td>
            <td></td>
          </tr>

          <tr>
            <td style="font-weight: bold" colspan="9">(3)社会经济状况</td>
          </tr>
          <tr>
            <td></td>
            <td>流域内人口数(人)</td>
            <td>流域内劳动力人口(人)</td>
            <td>平均粮食单产(kg/ h㎡)</td>
            <td>人均粮食(kg/人)</td>

            <td>农村生产总值(万元)</td>
            <td>人均基本农田(h㎡)</td>
            <td>人均纯收入(元)</td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td>
              <el-input v-model="form.population" placeholder=""></el-input>
            </td>

            <td><el-input v-model="form.laborPopulation" placeholder=""></el-input></td>
            <td><el-input v-model="form.grainPerCapita" placeholder=""></el-input></td>
            <td><el-input v-model="form.avgGrainYield" placeholder=""></el-input></td>
            <td><el-input v-model="form.ruralGdp" placeholder=""></el-input></td>
            <td><el-input v-model="form.farmlandPerCapita" placeholder=""></el-input></td>

            <td><el-input v-model="form.netIncome" placeholder=""></el-input></td>
            <td></td>
          </tr>

          <tr>
            <td>填报人：</td>
            <td colspan="2">
              <el-select v-model="form.organizer" filterable placeholder="请选择">
                <el-option v-for="item in globalUser" :key="item.userNo" :label="item.username" :value="item.userNo"> </el-option>
              </el-select>
            </td>
            <td>核查人：</td>
            <td colspan="2">
              <el-select v-model="form.reviewer" filterable placeholder="请选择">
                <el-option v-for="item in globalUser" :key="item.userNo" :label="item.username" :value="item.userNo"> </el-option>
              </el-select>
            </td>
            <td>资料来源：</td>
            <td colspan="2">
              <el-input v-model="form.status" placeholder=""></el-input>
            </td>
          </tr>

          <tr>
            <td>备注</td>
            <td colspan="8">
              <el-input v-model="form.remark" placeholder=""></el-input>
            </td>
          </tr>
        </tbody>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { viewPageStationInfo, smallbasinbasicbasinInfoviewpageRecord, smallbasinbasicbasinInfosavesaveRecord, smallbasinbasicbasinInforemovedelRecord } from '../../../api/index';

export default {
  name: 'stationlist',
  data() {
    return {
      headers: {
        Authorization: sessionStorage['token']
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      query: {
        tm: [],
        stname: ''
      },
      excelllog: false,
      formInline: {},
      tableData: [],
      selectData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      logTitle: '',
      pageTotal: 0,
      form: {},
      daoruUrl: '',
      stationData: []
    };
  },
  created() {
    let that = this;
    that.getData();
    this.getstationData();
    this.daoruUrl = globalVar.jingliujiangyuUrl + '/small/basin/basic/basinInfo/import/importBasinInfo?stcd=' + stationInfo.stcd + '&stType=' + systype;
  },
  methods: {
    successup() {
      this.$message.success('操作成功');
      this.getData();
    },
    download() {
      let that = this;
      window.location.href = globalVar.jingliujiangyuUrl + '/small/basin/basic/basinInfo/download/downloadTemp';

      this.$message.success('下载成功');
    },

    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        console.log(res);
        this.stationData = res.object.dataList.filter((item) => {
          return item.stType == systype;
        });
      });
    },
    getData() {
      let data = {
        currentPage: this.page.currentPage,
        pageSize: 100000,
        stnm: this.query.stnm,
        county: this.query.county,
        stcd: stationInfo.stcd
      };
      smallbasinbasicbasinInfoviewpageRecord(data).then((res) => {
        this.tableData = res.object.dataList;
        this.page = res.object.page;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },
    // 删除操作
    handleDelete(item) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          smallbasinbasicbasinInforemovedelRecord({
            recordNo: item.recordNo
          }).then((e) => {
            this.$message.success('删除成功');
            this.getData();
          });
        })
        .catch(() => {});
    },

    // 编辑操作
    handleEdit(row) {
      this.form = row;

      this.logTitle = '编辑小流域基础信息';

      this.editVisible = true;
    },
    handleAdd() {
      this.logTitle = '新增小流域基础信息';
      this.form = {
        stcd: stationInfo.stcd
      };
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      let that = this;

      that.form.stcd = 1;
      smallbasinbasicbasinInfosavesaveRecord(that.form).then((e) => {
        this.editVisible = false;
        this.$message.success('操作成功');
        this.getData();
      });
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>



<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

table {
  line-height: 25px;
}
th {
  border: 1px solid #fff;
  background: #3f8cff;
  color: #fff;
  padding: 6px 8px;
}
td {
  text-align: center;
  border: 1px solid #ebeef5;
}
tr:hover {
  background-color: #f5f7fa;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.container-wrap {
  min-height: 100%;
  height: auto !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 474px;
  height: 320px;
}
.tips {
  height: 33px;
  font-size: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #434343;
  line-height: 33px;
  text-align: center;
  margin-top: 55px;
}
</style>

